/**
 * =======================================================================
 * Action Buttons Styles - 操作按钮样式
 * =======================================================================
 *
 * 这个文件包含了操作按钮的样式，包括：
 * - 工具栏按钮样式
 * - 表格操作按钮样式
 * - 按钮悬停效果
 * - 按钮响应式设计
 *
 * @version 1.0.0
 * @author Anypay Team
 * =======================================================================
 */

/* =======================================================================
   1. 工具栏按钮样式
   ======================================================================= */

/**
 * Apple风格工具栏主要按钮
 * 用于表格工具栏区域的主要操作按钮
 */
.anypay-apple-toolbar .ant-btn-primary {
  background: #007aff;
  border-color: #007aff;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 122, 255, 0.1);
}

/**
 * 工具栏主要按钮悬停效果
 */
.anypay-apple-toolbar .ant-btn-primary:hover {
  background: #005ce6;
  border-color: #005ce6;
  transform: translateY(-0.5px);
  box-shadow: 0 2px 4px rgba(0, 122, 255, 0.15);
}

/* =======================================================================
   2. 表格操作按钮样式
   ======================================================================= */

/**
 * 操作按钮容器样式
 * 减少操作按钮之间的间距
 */
.anypay-apple-actions .ant-space {
  gap: 4px !important;
}

/**
 * 表格内操作按钮基础样式
 * 压缩版的链接按钮，适合表格内使用
 */
.anypay-apple-actions .ant-btn-link {
  padding: 4px 6px !important; /* 紧凑内边距 */
  font-size: 13px !important; /* 较小字体 */
  line-height: 1.2 !important;
  min-width: auto !important;
  border-radius: 6px !important; /* 小圆角 */
  transition: all 0.2s ease !important;
}

/**
 * 操作按钮悬停效果
 * Apple 蓝色背景高亮
 */
.anypay-apple-actions .ant-btn-link:hover {
  background: rgba(0, 122, 255, 0.08) !important;
  transform: translateY(-0.5px); /* 微妙上移 */
}

/**
 * 危险操作按钮悬停效果
 * 如删除按钮的红色高亮
 */
.anypay-apple-actions .ant-btn-link.ant-btn-dangerous:hover {
  background: rgba(255, 59, 48, 0.08) !important;
}

/**
 * 操作按钮图标样式
 * 压缩图标尺寸和间距
 */
.anypay-apple-actions .ant-btn-link .anticon {
  font-size: 12px !important; /* 小图标 */
  margin-right: 2px !important; /* 紧凑间距 */
}

/* =======================================================================
   3. 通用按钮样式
   ======================================================================= */

/**
 * Apple风格表单输入框样式
 * 包括输入框和选择框的统一外观
 */
.anypay-apple-search-row .ant-input,
.anypay-apple-search-row .ant-select-selector {
  border-radius: 8px; /* 中等圆角 */
  border-color: rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

/**
 * 表单元素焦点状态样式
 * Apple 蓝色焦点效果
 */
.anypay-apple-search-row .ant-input:focus,
.anypay-apple-search-row .ant-select-focused .ant-select-selector {
  border-color: #007aff; /* Apple 蓝色 */
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

/**
 * 搜索区域主要按钮样式
 * Apple 蓝色主要操作按钮
 */
.anypay-apple-search-row .ant-btn-primary {
  background: #007aff; /* Apple 蓝色 */
  border-color: #007aff;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 122, 255, 0.1);
}

/**
 * 主要按钮悬停效果
 */
.anypay-apple-search-row .ant-btn-primary:hover {
  background: #005ce6;
  border-color: #005ce6;
  transform: translateY(-0.5px); /* 微妙上移效果 */
  box-shadow: 0 2px 4px rgba(0, 122, 255, 0.15);
}

/**
 * 搜索区域次要按钮样式
 */
.anypay-apple-search-row .ant-btn:not(.ant-btn-primary) {
  border-radius: 8px;
  border-color: rgba(0, 0, 0, 0.1);
  color: #424245;
  font-weight: 500;
  transition: all 0.2s ease;
}

/**
 * 次要按钮悬停效果
 */
.anypay-apple-search-row .ant-btn:not(.ant-btn-primary):hover {
  border-color: rgba(0, 0, 0, 0.15);
  transform: translateY(-0.5px);
}

/* =======================================================================
   4. 下拉菜单操作按钮样式
   ======================================================================= */

/**
 * 下拉菜单触发按钮样式
 * 用于"更多"操作按钮
 */
.anypay-apple-actions .ant-dropdown-trigger {
  padding: 4px 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 13px;
}

/**
 * 下拉菜单触发按钮悬停效果
 */
.anypay-apple-actions .ant-dropdown-trigger:hover {
  background-color: rgba(0, 122, 255, 0.08);
  color: #007aff;
}

/**
 * 下拉菜单触发按钮图标样式
 */
.anypay-apple-actions .ant-dropdown-trigger .anticon {
  font-size: 14px;
  margin-right: 4px;
}

/* =======================================================================
   5. 按钮响应式设计
   ======================================================================= */

/**
 * 移动端按钮适配
 */
@media (max-width: 768px) {
  .anypay-apple-actions .ant-btn-link {
    font-size: 12px !important;
    padding: 3px 5px !important;
  }

  .anypay-apple-actions .ant-btn-link .anticon {
    font-size: 11px !important;
  }
}